export const writeConfig=[
    {"label":"输出函数内容",
     "contend":`
        var foo = {n:1};
        (function(foo){
            console.log(foo.n);
            foo.n = 3;
            var foo = {n:2};
            console.log(foo.n);
        })(foo);
        console.log(foo.n);
     `,
     "desc":"第一步：进行预编译，var全局变量foo、匿名函数 function、var局部变量foo  第二步：代码自上而下、自左向右执行计算： 对全局变量foo进行赋值foo={n:1}；注意：此值为对象，属于引用类型； 匿名函数传入参数foo={n:1}自执行； console.log(foo);打出数字1； 由于存在foo局部变量，那么对foo变量进行赋值foo={n:3}，同时更改了引用类型的参数值，全局foo变量被重新赋值foo={n:3}； 对局部变量foo进行重新赋值foo={n:2}; console.log(foo);打出数字2； 全局变量foo={n:3},因此，console.log(foo);打出数字3；",
     "result":"1 2 3"
    },
    {"label":"执行以下程序，输出结果为",
     "contend":()=>{
        function Foo() {
            var i = 0;
            return function() {
                console.log(i++);
            }
        }
        var f1 = Foo();
        var f2 = Foo();
        f1();
        f1();
        f2();
     },
     "desc":"每次调用外部函数Foo()时，都会开辟一个新的内存空间，这个内存空间保存着自由变量i。由于内部的匿名函数使用了Foo函数的自由变量i，让该变量可以延迟使用，因此第一个调用f1()时输出自由变量i的值为0，第二次调用f1()时输出自由变量i的值为1，又由于f1和f2是两次Foo()调用返回的结果，它们的i值是保存在不同的内存空间上，也就没有任何关系，故第一次调用f2()输出的结果为0",
     "result":"0 1 0"
    },
    {"label":"输出函数内容",
     "contend":" A: NaN == NaN \n B: null == undefined \n C '': == 0 \n D: true == 1" ,
     "desc":"NaN无论与谁比较，包括它自己，结果都是false，",
     "result":"A"
    },
    {"label":"执行完如下程序后，所有能被访问到的变量是",
     "contend":`
        var a = 1;
        b = 2;
        eval('var c = 3');
        delete a;
        delete b;
        delete c;
     `,
     "desc":"eval中声明的变量可以被删除，其他var不能，未声明的也可以删除",
     "result":"a"
    },
    {"label":"上面这段代码运行后的输出是",
     "contend":`
        (function() {
            var a = b = 5;
        })();   
        console.log(b);
        console.log(a);
     `,
     "desc":"var a=b=5相当于 var a=5,b=5,b是全局变量",
     "result":'5 /n 报错'
    },
    {"label":"如下代码,执行后结果是？",
     "contend":`
     var label="World!";
     (function(){
         var label;
         if(typeof label=== 'undefined'){
             label='Jack';
             console.log('Goodbye'+label);
         }
         else{
             console.log('hello'+label);
         }
     })();
     `,
     "desc":"js搜索变量是从内部顺原型链往外部找的，内部直接找到了label，就不去外部了，执行第一次if时还没初始化值，所以为undefined，然后赋值，执行console，结束，",
     "result":'Goodbye jack'
    },
    {"label":"以下JS代码的输出结果以及变量i的值是？",
     "contend":`
     var i = 100;
     function foo() {
         bbb: try {
             console.log("position1");
             return i++;  }
         finally {
             break bbb;
         }
         console.log("position2");
         return i;
     }
     foo();
     `,
     "desc":"",
     "result":'position1、position2、101'
    },
    {"label":"上面这段代码运行后得到的结果分别是什么？",
     "contend":`
     console.log(([])?true:false); 
     console.log(([]==false?true:false)); 
     console.log(({}==false)?true:false) 
     `,
     "desc":"三元运算会进行类型转换，相当于 [] == true。 ==类型转换偏爱数字类型，所以 [] => 0 , {} => NaN",
     "result":'true , true ,false'
    },
    {"label":"以下JS代码输出的结果是什么？",
     "contend":`
     let obj = {
        num1: 117
      }
      let res = obj;
      obj.child = obj = { num2: 935 };
      var x = y = res.child.num2;
      console.log(obj.child);
      console.log(res.num1);
      console.log(y); 
     `,
     "desc":`
     obj.child = obj = { num2: 935 };
     先声明： obj = {num1: 117 , child} res = {num1: 117 , child}  
     再赋值： obj.child =  { num2: 935 } res = {num1: 117 , child:{ num2: 935 }}  
     `,
     "result":'true , true ,false'
    },
    {"label":"请问以下JS代码的输出结果会是什么",
     "contend":`
     var a = 'w' 
    let obj = {
    a: 'o',
    print: function() {
        console.log(this.a);
    },
    print2: () => { 
        console.log(this.a);
    }
    }
    let p = obj.print;
    let p2 = obj.print2;
    obj.print();
    obj.print2();
    p();
    p2();
     `,
     "desc":`
     obj.print(); this指向obj
     obj.print2(); 箭头函数，无函数包裹 指向windos
     p(); windows
     p2(); windows
     `,
     "result":'o,w,w,w'
    },
    {"label":"以下JS代码最终输出的结果和num值分别是多少？",
     "contend":`
     var test = (function() {
        var num = 0
        return () => {
            return num++
        }
      }())
      for (var i = 0; i < 20; i++) {
        test()
      }
      console.log(test());
     `,
     "desc":`
      test = ()=>{return num++}
      for循环结束后,i = 19
      再次调用： 打印i = 20,是值为21
     `,
     "result":'20,21'
    },
    {"label":"下面这段JavaScript代码的的输出是什么？",
     "contend":`
     var myObject = {
        foo: "bar",
        func: function() {
            var self = this;
            console.log(this.foo);   
            console.log(self.foo);   
            (function() {
                console.log(this.foo);   
                console.log(self.foo);   
            }());
        }
    };
    myObject.func();
     `,
     "desc":`
     1.第一个this.foo输出bar，因为当前this指向对象myObject。 
     2.第二个self.foo输出bar，因为self是this的副本，同指向myObject对象。 
     3.第三个this.foo输出undefined，因为这个IIFE(立即执行函数表达式)中的this指向window。 
     4.第四个self.foo输出bar，因为这个匿名函数所处的上下文中没有self，所以通过作用域链向上查找，从包含它的父函数中找到了指向myObject对象的self。
     `,
     "result":'bar bar undefined bar'
    },
    {"label":"在浏览器控制台中执行以下代码，输出的结果是?",
     "contend":`
     function test() {
        var n = 4399;
        function add(){
            n++;
            console.log(n);
        }
        return {n:n,add:add}
    }
    var result = test();
    var result2 = test();
    result.add();
    result.add();
    console.log(result.n);
    result2.add();
     `,
     "desc":`懵逼点在第三个，这里{n：n}是对变量n里的值进行缓存，而不是本身n这个指针变量，这样生成add的时候n指向的值是多少{n：n}里的值就是多少`,
     "result":'4400 4401 4399 4400'
    },
    {"label":"在浏览器控制台中执行以下代码，输出的结果是?",
     "contend":`
     function test() {
        var n = 4399;
        function add(){
            n++;
            console.log(n);
        }
        return {n:n,add:add}
    }
    var result = test();
    var result2 = test();
    result.add();
    result.add();
    console.log(result.n);
    result2.add();
     `,
     "desc":`懵逼点在第三个，这里{n：n}是对变量n里的值进行缓存，而不是本身n这个指针变量，这样生成add的时候n指向的值是多少{n：n}里的值就是多少`,
     "result":'4400 4401 4399 4400'
    },
]
export const meetConfig=[
    {"label":"描述盒子模型",
     "contend":`
     盒子模型包括contend,padding,border,margin四个部分， 
     有两种模型：标准盒模型(box-sizing:contend-box)，怪异盒模型
     标准盒模型设置宽是contend,怪异是contend+border+padding(box-sizing:border-box)
     `,
     "desc":"说出包含四部分，两种模型，两种模型的宽代表什么",
     "result":""
    },
    {"label":"css的选择器",
     "contend":`简单选择器，分组选择器，组合选择器，伪选择器`,
     "desc":`
        简单选择器：id class tag * 
        分组：,
        组合：" ",>,~,+
        伪元素：:hover , ::before
     `,
     "result":""
    },
    {"label":"选择器优先级排序",
     "contend":`
     !important 
     内联样式 
     ID 选择器（#id{}） 
     类选择器（.class{}） = 属性选择器（a[href="segmentfault.com"]{}） = 伪类选择器（ :hover{}） 
     标签选择器（span{}） = 伪元素选择器（ ::before{}）= 后代选择器（.father .child{}）
     子选择器（.father > .child{}） = 相邻选择器（ .bro1 + .bro2{}） 
     通配符选择器（*{}）   
     `,
     "desc":'',
     "result":""
    },
    {"label":"性能优化的方法",
     "contend":`
        1.减少http请求
        2.使用http2
        3.使用服务端渲染
        4.cdn
        6. 使用字体图标 iconfont 代替图片图标
        7. 善用缓存，不重复加载相同的资源
        8. 压缩文件
        9. 图片优化
        10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
        11. 减少重绘重排
        12. 使用事件委托
        13. 注意程序的局部性
        14. if-else 对比 switch
        15. 查找表
        16. 避免页面卡顿
        17. 使用 requestAnimationFrame 来实现视觉变化
        18. 使用 Web Workers
     `,
     "desc":'', 
     "result":""
    },
    {"label":"页面中大量图片和文字，如何优化",
     "contend":`
     1.使用图片懒加载
     2.将图片压缩
     3.非关键资源延迟加载
     4.合并和压缩CSS和JavaScript文件
     5.使用cdn
     6.使用缓存
     7.使用http2
     `,
     "desc":`
     压缩图片： 使用适当的图片压缩工具，减少图片文件的大小，以提高页面加载速度。可以考虑使用工具如ImageOptim、TinyPNG等。
        使用图片懒加载： 将页面中的图片按需加载，而不是一次性加载所有图片，可以提高页面的初始加载速度。可以使用像LazyLoad.js这样的JavaScript库来实现图片的懒加载。
        优化图片格式： 根据图片的内容和用途选择合适的图片格式。例如，对于图像带有透明背景的情况，可以选择PNG格式，而对于照片等内容，可以选择JPEG格式。
        使用CSS Sprites： 将页面中的多个小图标或者背景图合并成一张大图，然后通过CSS的background-position属性来显示需要的部分，减少HTTP请求数量，提高页面加载速度。
        延迟加载非关键资源： 将非关键资源（如广告、第三方脚本等）的加载延迟到页面主要内容加载完成后再进行，以提高页面的初次渲染速度。
        合并和压缩CSS和JavaScript文件： 将多个CSS文件和JavaScript文件合并成尽量少的文件，并对合并后的文件进行压缩，以减少HTTP请求和文件大小。
        使用CDN加速： 将静态资源（如图片、CSS和JavaScript文件等）托管到CDN上，利用CDN的分布式节点提高资源加载速度。
        使用字体图标替代图片： 对于一些小图标，可以使用字体图标（如Font Awesome）来替代图片，以减少HTTP请求和文件大小。
        优化文字内容： 对于页面中的大量文字内容，可以考虑进行内容压缩、合理分段、使用段落、标题等HTML标签来优化内容结构，提高页面的可读性和用户体验。
        `,
     "result":""
    },
    {"label":"引发内存泄漏的常见方式",
     "contend":`
     1.未清理的dom
     2.未释放的监听器，定时器
     3.循环引用
     4.第三方库使用不当
     `,
     "desc":`
    未及时清理无用的引用： 当页面中的DOM元素、JavaScript对象、事件监听器等不再需要时，如果未手动解除对它们的引用，就会导致内存泄漏。例如，未及时移除的事件监听器、未释放的闭包等都可能导致内存泄漏。\n
    循环引用： 当两个或多个对象之间形成循环引用时，即使这些对象在页面中已经不再需要，但由于它们之间相互引用，导致垃圾回收器无法正确识别它们已经失去了作用，从而导致内存泄漏。\n
    大量数据的缓存： 当页面中存在大量数据需要缓存时，如果缓存管理不当，可能会导致缓存数据长时间占用内存而不被释放，从而引发内存泄漏。\n
    未关闭的定时器或者回调函数： 当页面中存在未关闭的定时器、轮询函数或者异步回调函数时，如果它们持续执行而未被清理，可能会导致内存泄漏。\n
    内存泄漏的第三方库： 使用第三方库时，如果该库本身存在内存泄漏问题，或者使用方式不当，也可能导致页面出现内存泄漏。\n
    浏览器兼容性问题： 不同浏览器对JavaScript引擎的实现方式有所不同，有些浏览器可能存在对内存管理的不足之处，导致在特定情况下容易发生内存泄漏。\n
    `,
     "result":""
    },
    {"label":"常见的网络攻击和如何预防",
     "contend":`
     1.xss
     2.csrf
     `,
     "desc":`
        预防手段：
        xss:对cookie使用http-only,对字符进行过滤
        csrf:
     `,
     "result":""
    },
    {"label":"事件流相关",
     "contend":`
     1.描述事件流
        windows向触发初传播
        捕获事件
        从出发出向windws传播
     2.什么是事件委托
        利用冒泡把子元素的事件委托给父元素处理
     `,
     "desc":`
        
     `,
     "result":""
    },
    {"label":"什么是进程和线程,区别是什么？",
     "contend":`
     1.进程是cpu调度的基本单位
     2.线程是任务运行的基本单位
     `,
     "desc":`
        
     `,
     "result":""
    },
    {"label":"浏览器的进程有哪些？",
     "contend":`
     1.主线程
     2.渲染进程
     3.gpu加速进程
     4.插件进程
     5.网络进程
     `,
     "desc":`
        
     `,
     "result":""
    },
    {"label":"浏览器的缓存有什么用，有哪些缓存",
     "contend":`
    
     分为强制缓存和协商缓存：
    强制缓存： expires cache-control:lastmodify
    协商缓存： last-modify etag 
     `,
     "desc":`
     使用缓存可以减轻服务器的负担，加快网页的加载速度，减少多余数据的传输。
     http缓存分为强制和协商两种，强制缓存的优先级高于协商缓存。
     强制缓存由请求头 expires,cache-control控制， ca~是http1.1新增
     协商缓存由请求头 last-modify, etags控制,etags是http1.1新增
     `,
     "result":""
    },
    {"label":"浏览器的事件循环",
     "contend":`
     事件循环主要分为两大部分，同步任务和异步任务
     同步任务在执行栈中依次执行，异步任务会放入异步队列
     异步任务分为 宏任务和微任务，宏任务主要是浏览器的接口：定时器,io,ui渲染,script。微任务有promise.then,mountion.observe
     `,
     "desc":`
     当执行栈清空，先清空微任务队列， 然后开启新一轮循环 执行宏任务
     `,
     "result":""
    },
    {"label":"浏览器渲染过程及如何优化",
     "contend":`
     1.解析html文件，生成dom树
     2.解析css文件，生成cssom树
     3.合并cssom和dom生成渲染树
     4.计算渲染位置和大小
     5.将数据渲染到页面
     `,
     "desc":`
     如何优化渲染：
     1.延迟加载js，因为js运行和渲染进程互斥
        1.将js代码放在最后
        2.使用defer,async
     2.优化css
        1.样式少的话使用内敛
        2.使用link 少用@import
     3.减少回流重绘
        1.避免频繁操作dom
        2.避免频繁操作样式
        3.复杂动画使用定位脱离文档流
     `,
     "result":""
    },
    {"label":"vue2和vue3有哪些区别",
     "contend":`
     1.options和compision
     2.diff
     3.响应式
     4.新增组件
     5.增加了api
     `,
     "desc":`
     `,
     "result":""
    },
    {"label":"vue优化方式",
     "contend":`
     编译阶段：
    1.不将v-if和v-for一起使用
    2.v-for加key
    3.路由懒加载
    第三方组件按需加载
    打包优化：
    1.压缩代码
    2.使用cdn加载三方资源
    3.抽离公共组件
    用户体验：
    1.骨架屏，客户端缓存
     `,
     "desc":`
     `,
     "result":""
    },
    {"label":"nextTick的原理和作用",
     "contend":`
     场景：修改数据后立即立即获取dom的值仍是旧值
     原理：vue更新数据时异步执行的,nextTick使用微任务将获取操作放在这次循环之后。
     `,
     "desc":`
     `,
     "result":""
    },
    {"label":"性能优化的方式有哪些？",
     "contend":`
     html,css:
     尽量减少dom数量
     使用defer,async延迟js加载，避免阻塞页面渲染
     减少css选择器的复杂层度
     启动硬件加速
     js:
     减少dom操作
     使用事件委托
     使用缓存
     webpack:

     网络优化：
     使用http2
     合并请求
     使用http缓存
     压缩静态文件

     `,
     "desc":`
     `,
     "result":""
    },
    {"label":"http的状态码有哪些",
    "contend":`
    1.1表示消息
    2.2表示成功
    3.3表示重定向
    4.4表示错误
    5.5表示服务器错误
    常见的状态：
    1: 100:继续发送，服务器已经接受请求，继续发送剩余部分
       101:服务器根据客户请求切换协议
    2: 200:请求成功
       201:已创建
       202:已创建
       203:  
       204:请求成功但是没有结果返回
       205:  
       206:
    3: 300:
       301:永久移动
       302:临时移动
       303:  
       304:  
       305:使用代理
       307:临时重定向
    4: 400:语法错误
       401:未授权，需要认证
       402:  
       403:服务器拒绝请求
       404:找不到请求页面  
       405:  
       406:  
       407:  
       408:
    5: 500:
       501:  
       502:  
       503:服务器正在维护
       504:网关超时  
       501:  
    使用场景：
       100:客户端发送post之前
       206:一般用来做断点续传
       301:用新域名替代了旧域名，引起永久重定向
       302:临时重定向
       304:协商缓存
       400:参数错误
       403:拒绝访问
       404:找不到资源
       503:停机维护时
       504:超时
    `,
    "desc":`
    100:客户端发送post之前
    206:一般用来做断点续传
    301:用新域名替代了旧域名，引起永久重定向
    302:临时重定向
    304:协商缓存
    400:参数错误
    403:拒绝访问
    404:找不到资源
    503:停机维护时
    504:超时
    `,
    "result":""
   },
]